<template>
  <div
    class="vue-flow__node-common" 
    :draggable="true" 
    @dragstart="onDragStart($event, type, initProp)"
  >
    <NodeIcon name="common" :text="name" />
  </div>
</template>

<script setup>
import NodeIcon from '../../icon/NodeIcon.vue';
import { initCommonNodeProp } from '../initProp';
import useDragAndDrop from '../useDnD';


const { onDragStart } = useDragAndDrop()

const type = ref('common')
const name = ref('普通组件')

const initProp = ref(initCommonNodeProp())

/* const initProp = ref({
  id: '',
  type: type.value,
  name: name.value,
  mode: 'default',
  // mode: 'simple',
  nodeDataBase: {},
  style: {
      toolbar: {
        // isVisible: false,
        position: Position.Top,
        showIcon: false,
        offset: 10
      },
      handles: [
        {position: 'left', opacity: 1, type: 'target', style: ''},
        {position: 'right', opacity: 1, type: 'source', style: ''},
        {position: 'top', opacity: 0, type: 'target', style: ''},
        {position: 'bottom', opacity: 0, type: 'source', style: ''},
      ],
      extendHandles: []
  },
}) */
</script>

<style>
.vue-flow__node-common{
  margin-block-end: 8px;
}

.vue-flow__node-common .icon-with-text{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-block: 5px;
  padding-inline: 2px;
}

.vue-flow__node-common:hover{
  border-radius: 5px;
  background-color: #ddd !important;
  color: #000;
}
</style>
